<template>
    <div id="physical-report">
        <el-breadcrumb class="common-bread">
            <el-breadcrumb-item>体测分析报告</el-breadcrumb-item>
            <span class="phy-standard fr" @click="checkStandard()">体测标准</span>
        </el-breadcrumb>
        <div class="select-head">
            <el-select v-model="physicalId" placeholder="请选择体测">
                <el-option v-for='item in physicalList' :label='item.physicalName' :value='item.physicalId' :key="item.physicalId">
                </el-option>
            </el-select>
            <el-button class="search_btn" type="primary" :disabled="!physicalId" @click="getPhysicalReportInfo()">搜索</el-button>
            <el-button class="report_btn fr" type="primary" :disabled="!hasReportData" @click="reportPhysicalData()">导出报告</el-button>
        </div>
        <div class="contentBox">
            <div v-if="hasReportData" id="report_box">
                <div class="report-item-length report-title">
                    <h2>{{physicalName}}分析报告</h2>
                    <h3>一、体测总体情况</h3>
                    <p>{{headHtml}}</p>
                </div>
                <div class="total-charts report-item-length">
                    <vue-highcharts class="total-pie" :options="options_total" ref="pie_total"></vue-highcharts>
                    <vue-highcharts class="total-pie" :options="options_male" ref="pie_male"></vue-highcharts>
                    <vue-highcharts class="total-pie" :options="options_female" ref="pie_female"></vue-highcharts>
                    <span class="male-circle">男生</span>
                    <span class="female-circle">女生</span>
                    <div class="total-pie-bot">
                        <span><i class="rate-icon" :style="'background-color:'+ exclentColor"></i>优秀率</span>
                        <span><i class="rate-icon" :style="'background-color:'+ goodColor"></i>良好率</span>
                        <span><i class="rate-icon" :style="'background-color:'+ passColor"></i>及格率</span>
                        <span><i class="rate-icon" :style="'background-color:'+ nopassColor"></i>不及格率</span>
                    </div>
                </div>
                <div class="report-item-length">
                    <table>
                        <tbody>
                            <tr class="tab-head">
                                <td>总成绩</td>
                                <td v-for="name in tableData">{{name.score}}</td>
                            </tr>
                            <tr>
                                <td>男生人数</td>
                                <td v-for="name in tableData">{{name.male}}</td>
                            </tr>
                            <tr>
                                <td>女生人数</td>
                                <td v-for="exclent in tableData">{{exclent.female}}</td>
                            </tr>
                            <tr>
                                <td>总人数</td>
                                <td v-for="pass in tableData">{{pass.total}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="report-item-length">
                    <p>{{totalRateHtml}}</p>
                </div>

                <div class="report-item-length">
                    <p>{{maleRateHtml}}{{femaleRateHtml}}</p>
                </div>

                <!-- 表格 -->
                <div class="report-item-length">
                    <table>
                        <tbody>
                            <tr class="tab-head">
                                <td>及格率排名</td>
                                <td colspan="3">前三</td>
                                <td colspan="3">后三</td>
                            </tr>
                            <tr>
                                <td>项目</td>
                                <td v-for="name in ranking">{{textNameFormat.get(name.testNameType*1)}}</td>
                            </tr>
                            <tr>
                                <td>优秀率</td>
                                <td v-for="exclent in ranking">{{(exclent.exclentRate/100).toFixed(1)}}%</td>
                            </tr>
                            <tr>
                                <td>及格率</td>
                                <td v-for="pass in ranking">{{(pass.passRate/100).toFixed(1)}}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="report-item-length">
                    <p>{{rankingHtml}}</p>
                </div>

                <div class="report-item-length" style="text-align: center;">
                    <!-- 进步榜，退步榜 -->
                    <div class="progress_back" v-if="hasProgressData">
                        <span>{{progressTitle}}</span>
                        <vue-highcharts :options="options_progress" ref="pie_progress" style="height: 300px;padding: 0 20px;"></vue-highcharts>
                    </div>
                    <div class="progress_back" v-if="hasBackslideData">
                        <span>{{backslideTitle}}</span>
                        <vue-highcharts :options="options_backslide" ref="pie_backslide" style="height: 300px;padding: 0 20px;"></vue-highcharts>
                    </div>
                </div>
                <div class="report-item-length">
                    <p>{{probackHtml}}</p>
                </div>

                <div class="report-item-length">
                    <h3>{{schoolOrClassTitle}}</h3>
                </div>

                <div class="school-info report-item-length">
                    <vue-highcharts :options="options_school" ref="pie_school" style="height: 300px;padding: 0 20px;"></vue-highcharts>
                </div>
                <div class="report-item-length">
                    <p>{{everySGHtml}}</p>
                </div>

                <div v-if="user.userType>1" class="report-item-length">
                    <table>
                        <tbody>
                            <tr class="tab-head">
                                <td>及格率排名</td>
                                <td :colspan="prograssClasslen">前三</td>
                                <td v-if="backClasslen > 0" :colspan="backClasslen">后三</td>
                            </tr>
                            <tr>
                                <td>班级</td>
                                <td v-for="name in classRank">{{name.className}}</td>
                            </tr>
                            <tr>
                                <td>优秀率</td>
                                <td v-for="exclent in classRank">{{(exclent.exclentRate/100).toFixed(1)}}%</td>
                            </tr>
                            <tr>
                                <td>及格率</td>
                                <td v-for="pass in classRank">{{(pass.passRate/100).toFixed(1)}}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="report-item-length">
                    <p>{{classRankHtml}}</p>
                </div>

            </div>
            <div v-else id="report_box">
                <div class="nodata">
                    <img src="../../../assets/noData.png">
                    <p>暂无数据</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState, mapActions } from "vuex";
    export default {
        data() {
            return {
                physicalId: '',
                hasReportData: true,
                physicalName: '',
                physicalList: [],
                schoolOrClassTitle: '',
                backClasslen: 0,
                prograssClasslen: 0,
                // 图形各等级颜色
                exclentColor: '#ff9c17',
                goodColor: '#69C0FF',
                passColor: '#86C88E',
                nopassColor: '#FF7875',
                textNameFormat: new Map([
                    [1, 'BMI'],
                    [2, '肺活量'],
                    [3, '50米跑'],
                    [4, '立定跳远'],
                    [5, '坐位体前屈'],
                    [6, '1分钟仰卧起坐'],
                    [7, '引体向上'],
                    [8, '1000米跑'],
                    [9, '800米跑'],
                    [12, '8*50米往返跑'],
                    [13, '1分钟跳绳']
                ]),
                // 规则表
                phyRules: new Map([
                    [2, '心肺功能'],
                    [3, '快速奔跑能力'],
                    [4, '下肢肌肉的爆发力'],
                    [5, '柔韧性'],
                    [6, '力量和耐力'],
                    [7, '男生上肢肌肉力量'],
                    [8, '男生长跑能力'],
                    [9, '女生长跑能力'],
                    [12, '长跑能力'],
                    [13, '身体协调性'],
                ]),
                phyAdvise: new Map([
                    [2, '长跑、骑单车、有氧健身操等可提高'],
                    [3, '高抬腿、小步跑、快速跑、50米跑、100米跑等可提高'],
                    [4, '蹲跳起、单脚交换跳、蹍跳步、纵跳摸高、蛙跳等可提高'],
                    [5, '站位体前屈、正踢腿、压腿、拉伸运动等可提高'],
                    [6, '俯卧撑、仰卧起坐、双臂屈伸等可提高'],
                    [7, '俯卧撑、屈臂悬垂、屈臂引体等可提高'],
                    [8, '高抬腿、负重深蹲、提膝跳、俯卧撑等可提高'],
                    [9, '高抬腿、负重深蹲、提膝跳、俯卧撑等可提高'],
                    [12, '高抬腿、负重深蹲、提膝跳、俯卧撑等可提高'],
                    [13, '交叉拍脚、交叉跑、交叉提膝、抬腿拍掌等可提高'],
                ]),
                options_total: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie'
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: { title: null, gridLineWidth: 0, },
                    colorByPoint: true,
                    colors: ['#ff9c17', '#69C0FF', '#86C88E', '#FF7875'],
                    plotOptions: {
                        pie: {
                            showInLegend: true,//设置是否显示标签信息
                            dataLabels: {
                                distance: -30,
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            }
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:#333;">{point.y:.1f}%</span>',
                                useHTML: true
                            }
                        }
                    },
                    tooltip: { enabled: false },
                    series: [],
                    legend: { enabled: false }
                },
                options_male: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'pie'
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: { title: null, gridLineWidth: 0 },
                    colorByPoint: true,
                    colors: ['#ff9c17', '#69C0FF', '#86C88E', '#FF7875'],
                    plotOptions: {
                        pie: {
                            innerSize: '75%',
                            showInLegend: true,//设置是否显示标签信息
                            dataLabels: {
                                distance: -10,
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            }
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:#333;">{point.y:.1f}%</span>',
                                useHTML: true
                            }
                        }
                    },
                    tooltip: { enabled: false },
                    series: [],
                    legend: { enabled: false }
                },
                options_female: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'pie',
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: { title: null, gridLineWidth: 0, },
                    colorByPoint: true,
                    colors: ['#ff9c17', '#69C0FF', '#86C88E', '#FF7875'],
                    plotOptions: {
                        pie: {
                            innerSize: '75%',
                            showInLegend: true,//设置是否显示标签信息
                            dataLabels: {
                                distance: -10,
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            }
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:#333;">{point.y:.1f}%</span>',
                                useHTML: true
                            }
                        }
                    },
                    tooltip: { enabled: false },
                    series: [],
                    legend: { enabled: false }
                },

                options_progress: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'column'
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: {
                        title: null,
                        gridLineWidth: 0,
                        showLastLabel: false,
                        tickPositions: [0, 25, 50, 75, 100, 113]
                    },
                    colorByPoint: true,
                    colors: ['#86C88E', '#ed7d31'],
                    plotOptions: {
                        column: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            },
                            shadow: false,
                            groupPadding: 0.1
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:{point.color}">{point.y:.1f}%</span>',
                                useHTML: true
                            },
                            events: { legendItemClick: function () { return false } }
                        }
                    },
                    tooltip: { enabled: false },
                    series: []
                },
                options_backslide: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'column'
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: {
                        title: null,
                        gridLineWidth: 0,
                        showLastLabel: false,
                        tickPositions: [0, 25, 50, 75, 100, 113]
                    },
                    colorByPoint: true,
                    colors: ['#86C88E', '#ed7d31'],
                    plotOptions: {
                        column: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            },
                            shadow: false,
                            groupPadding: 0.1
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:{point.color}">{point.y:.1f}%</span>',
                                useHTML: true
                            },
                            events: { legendItemClick: function () { return false } }
                        }
                    },
                    tooltip: { enabled: false },
                    series: []
                },
                options_school: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'column'
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: {
                        title: null,
                        gridLineWidth: 0,
                        showLastLabel: false,
                        tickPositions: [0, 25, 50, 75, 100, 113]
                    },
                    colorByPoint: true,
                    colors: ['#5b9bd5', '#ed7d31'],
                    plotOptions: {
                        column: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            },
                            shadow: false,
                            groupPadding: 0.1
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:{point.color}">{point.y:.1f}%</span>',
                                useHTML: true
                            },
                            events: { legendItemClick: function () { return false } }
                        }
                    },
                    tooltip: { enabled: false },
                    series: []
                },

                // 头部信息
                headHtml: '',
                totalRateHtml: '',
                maleRateHtml: '',
                femaleRateHtml: '',
                tableData: [],
                ranking: [],
                rankingHtml: '',

                hasProgressData: true,
                hasBackslideData: true,
                progressTitle: '',
                backslideTitle: '',
                probackHtml: '',
                everySGHtml: '',
                classRank: [],
                classRankHtml: ''
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.getPhysicalList();
        },
        methods: {
            checkStandard() {
                location.href = '/#/physicalStandard'
            },
            computerReportItemHeight() {
                let itemList = document.getElementsByClassName('report-item-length')
                let totalHeight = 0;
                let divHeight = 0;
                for (let i = 0; i < itemList.length; i++) {
                    let everylen = itemList[i].childNodes.length - 1
                    if (itemList[i].childNodes[everylen].className == 'place-box') {
                        itemList[i].removeChild(itemList[i].childNodes[everylen])
                    }
                    totalHeight += itemList[i].scrollHeight + 10
                    if (totalHeight > 1460) {
                        divHeight = 1450 + itemList[i].scrollHeight - totalHeight;
                        let divDom = document.createElement('div');
                        divDom.className = 'place-box';
                        divDom.style.height = divHeight + 'px';
                        divDom.style.display = 'none';
                        itemList[i - 1].appendChild(divDom);
                        totalHeight = 20
                    }
                }
            },
            getPhysicalList() {
                this.physicalList = []
                this.physicalId = ''
                this.$axios.post('/jlp/physical/finishPhysical', {}).then(response => {
                    if (response.data.error == 10000) {
                        this.physicalList = response.data.data
                        this.physicalId = response.data.data[0].physicalId
                        if (this.physicalList && this.physicalList.length > 0) {
                            this.getPhysicalReportInfo()
                        } else {
                            // 暂无数据
                            this.hasReportData = false;
                        }

                    } else {
                        this.hasReportData = false;
                    }
                }).catch((err) => {
                    this.hasReportData = false;
                })
            },
            getPhysicalReportInfo() {
                this.hasReportData = true;
                this.physicalName = this.physicalList.filter(ele => {
                    return ele.physicalId == this.physicalId
                })[0].physicalName
                this.getReportHead();
                this.getReportTotalData();
                this.getReportRanking();
                this.getReportProgress();
                if (this.user.userType < 2) {
                    this.getReportSchools();
                    this.schoolOrClassTitle = '二、各学校情况'
                } else {
                    this.getReportGrades();
                    this.getReportClassRank();
                    this.schoolOrClassTitle = '二、各年级和班级情况'
                }
                setTimeout(() => {
                    this.computerReportItemHeight()
                }, 200)
            },
            // 获取体测报告头信息
            getReportHead() {
                this.$axios.post('/jlp/physical/report/totalInfo', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        let prodata = response.data.data;
                        if (!prodata || !prodata.beginDate || prodata.totalPeople == 0) {
                            return this.hasReportData = false;
                        }
                        // let prodata = {
                        //     beginDate: '2018年5月份',
                        //     totalSchoolCount: '4',
                        //     totalClassCount: '20',
                        //     totalPeople: '1000',
                        //     totalAverageScore: '7980',
                        //     upOrDown: '-120',
                        // }
                        let headHtml = '';
                        headHtml = `本次体测于${prodata.beginDate}进行，`
                        if (this.user.userType > 1) {
                            headHtml += `参与班级共计${prodata.totalClassCount}个，`
                        } else {
                            headHtml += `参与学校共计${prodata.totalSchoolCount}所，`
                            headHtml += `${prodata.totalClassCount}个班级，`
                        }

                        headHtml += `参与人数${prodata.totalPeople}人，总体平均分为${(prodata.totalAverageScore / 100).toFixed(1)}分`
                        if (this.formatUpOrDown(prodata.upOrDown)) {
                            headHtml += `，${this.formatUpOrDown(prodata.upOrDown, '分')}`
                        }
                        headHtml += '。';
                        this.headHtml = headHtml;

                    } else {
                        this.hasReportData = false;
                    }
                }).catch(() => {
                    this.hasReportData = false;
                })
            },

            // 获取总成绩圆环数据
            getReportTotalData() {
                this.$axios.post('/jlp/physical/report/peoplecount', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        // 图表数据
                        let male = response.data.data.male,
                            female = response.data.data.female;
                        let maleTotal = male.exclent * 1 + male.good * 1 + male.pass * 1 + male.nopass * 1;
                        // let maleGood = male.exclent * 1 + male.good * 1;
                        let femaleTotal = female.exclent * 1 + female.good * 1 + female.pass * 1 + female.nopass * 1;
                        // let femaleGood = female.exclent * 1 + female.good * 1;
                        let myTotaldata = [
                            (male.exclent * 1 + female.exclent * 1) / (maleTotal + femaleTotal) * 100,
                            (male.good * 1 + female.good * 1) / (maleTotal + femaleTotal) * 100,
                            (male.pass * 1 + female.pass * 1) / (maleTotal + femaleTotal) * 100,
                            (male.nopass * 1 + female.nopass * 1) / (maleTotal + femaleTotal) * 100,
                        ];
                        let myMaleData = [
                            male.exclent / maleTotal * 100,
                            male.good / maleTotal * 100,
                            male.pass / maleTotal * 100,
                            male.nopass / maleTotal * 100
                        ]
                        let myFemaleData = [
                            female.exclent / femaleTotal * 100,
                            female.good / femaleTotal * 100,
                            female.pass / femaleTotal * 100,
                            female.nopass / femaleTotal * 100
                        ]
                        let pie_total = this.$refs.pie_total;
                        let pie_male = this.$refs.pie_male;
                        let pie_female = this.$refs.pie_female;
                        pie_total.removeSeries();
                        pie_male.removeSeries();
                        pie_female.removeSeries();
                        pie_total.addSeries({ data: myTotaldata })
                        pie_male.addSeries({ data: myMaleData })
                        pie_female.addSeries({ data: myFemaleData })
                        // 表格数据
                        this.tableData = [
                            {
                                score: '优秀',
                                male: male.exclent,
                                female: female.exclent,
                                total: male.exclent * 1 + female.exclent * 1
                            },
                            {
                                score: '良好',
                                male: male.good,
                                female: female.good,
                                total: male.good * 1 + female.good * 1
                            },
                            {
                                score: '及格',
                                male: male.pass,
                                female: female.pass,
                                total: male.pass * 1 + female.pass * 1
                            },
                            {
                                score: '不及格',
                                male: male.nopass,
                                female: female.nopass,
                                total: male.nopass * 1 + female.nopass * 1
                            },
                            {
                                score: '合计',
                                male: maleTotal,
                                female: femaleTotal,
                                total: maleTotal * 1 + femaleTotal * 1
                            }
                        ]
                        // 报告数据
                        // let rate = {
                        //     exclentRate: '2400',
                        //     exclentUpOrDown: '-100',
                        //     passRate: '8700',
                        //     passUpOrDown: '230',
                        //     maleExclentUpOrDown: '-150',
                        //     malePassUpOrDown: '-130',
                        //     femalePassUpOrDown: '0',
                        //     femaleExclentUpOrDown: '-70',
                        // }
                        let rate = response.data.data.rate;
                        let totalRateHtml = '', maleRateHtml = '', femaleRateHtml = '';
                        totalRateHtml = `体测总成绩优秀率${(rate.exclentRate / 100).toFixed(1)}%`
                        if (this.formatUpOrDown(rate.exclentUpOrDown)) {
                            totalRateHtml += `，${this.formatUpOrDown(rate.exclentUpOrDown)}`
                        }
                        totalRateHtml += `；及格率（含优秀、良好）${(rate.passRate / 100).toFixed(1)}%`
                        if (this.formatUpOrDown(rate.passUpOrDown)) {
                            totalRateHtml += `，${this.formatUpOrDown(rate.passUpOrDown)}`
                        }
                        totalRateHtml += '。'
                        this.totalRateHtml = totalRateHtml;

                        // 男生的数据
                        if (rate.maleExclentUpOrDown != -99999 && rate.malePassUpOrDown != -99999) {
                            if (rate.maleExclentUpOrDown < 0) {
                                maleRateHtml = `男生的优秀率有所下降，环比下降${(rate.maleExclentUpOrDown * (-1) / 100).toFixed(1)}个百分点`
                            }
                            if (rate.malePassUpOrDown < 0) {
                                maleRateHtml += `，男生的及格率也有所下降，环比下降${(rate.malePassUpOrDown * (-1) / 100).toFixed(1)}个百分点`
                            }
                            maleRateHtml += '。'
                            if (rate.maleExclentUpOrDown >= 0 && rate.malePassUpOrDown >= 0) {
                                maleRateHtml = '男生整体都有进步。'
                            }
                            if (rate.maleExclentUpOrDown == 0 && rate.malePassUpOrDown == 0) {
                                maleRateHtml = '男生优秀率和及格率跟上一次体测持平。';
                            }
                        }

                        // 女生的数据
                        if (rate.femaleExclentUpOrDown != -99999 && rate.femalePassUpOrDown != -99999) {
                            if (rate.femaleExclentUpOrDown < 0) {
                                femaleRateHtml = `女生的优秀率有所下降，环比下降${(rate.femaleExclentUpOrDown * (-1) / 100).toFixed(1)}个百分点`
                            }
                            if (rate.femalePassUpOrDown < 0) {
                                femaleRateHtml += `，女生的及格率也有所下降，环比下降${(rate.femalePassUpOrDown * (-1) / 100).toFixed(1)}个百分点`
                            }
                            femaleRateHtml += '。'
                            if (rate.femaleExclentUpOrDown >= 0 && rate.femalePassUpOrDown >= 0) {
                                femaleRateHtml = '女生整体都有进步。'
                            }
                            if (rate.femaleExclentUpOrDown == 0 && rate.femalePassUpOrDown == 0) {
                                femaleRateHtml = '女生优秀率和及格率跟上一次体测持平。';
                            }
                        }

                        // 都进步
                        if (
                            rate.maleExclentUpOrDown >= 0 && rate.malePassUpOrDown >= 0 &&
                            rate.femaleExclentUpOrDown >= 0 && rate.femalePassUpOrDown >= 0
                        ) {
                            maleRateHtml = '';
                            femaleRateHtml = '男生女生整体都有进步。';
                        }
                        // 都相同
                        if (
                            rate.maleExclentUpOrDown == 0 && rate.malePassUpOrDown == 0 &&
                            rate.femaleExclentUpOrDown == 0 && rate.femalePassUpOrDown == 0
                        ) {
                            maleRateHtml = '';
                            femaleRateHtml = '男生女生的优秀率和及格率都跟上一次体测持平。';
                        }
                        this.maleRateHtml = maleRateHtml;
                        this.femaleRateHtml = femaleRateHtml;
                    }
                }).catch(() => { })
            },

            // 获取项目排名信息
            getReportRanking() {
                this.$axios.post('/jlp/physical/report/rank/project', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        // 排名表
                        let ranking = [];
                        if (response.data.data.length > 6) {
                            ranking = response.data.data.slice(0, 6);
                        } else {
                            ranking = response.data.data
                        }

                        // let ranking = [
                        //     { testNameType: '1', exclentRate: '1800', passRate: '8800' },
                        //     { testNameType: '3', exclentRate: '1600', passRate: '8700' },
                        //     { testNameType: '4', exclentRate: '1500', passRate: '8500' },
                        //     { testNameType: '5', exclentRate: '1200', passRate: '7800' },
                        //     { testNameType: '7', exclentRate: '1400', passRate: '7200' },
                        //     { testNameType: '2', exclentRate: '1000', passRate: '7000' },
                        // ];
                        this.ranking = ranking;

                        let rankingHtml = `所有项目中，及格率最高的是${this.textNameFormat.get(ranking[0].testNameType * 1)}，及格率最低的三个项目分别是`
                        rankingHtml += `${this.textNameFormat.get(ranking[3].testNameType * 1)}、${this.textNameFormat.get(ranking[4].testNameType * 1)}和`
                        rankingHtml += `${this.textNameFormat.get(ranking[5].testNameType * 1)}`;

                        // let ranking1 = ranking.slice(3)
                        let ranking1 = ranking.slice(3).map(item => {
                            return item.testNameType
                        })
                        if (ranking1.includes(12) || (ranking1.includes(8) && ranking1.includes(9))) {
                            // 整体差
                            rankingHtml += `，长跑能力较差，高抬腿、负重深蹲、提膝跳、俯卧撑等可提高`
                            ranking1.forEach(item => {
                                if (![8, 9, 12].includes(item) && item != 1) {
                                    rankingHtml += '；' + this.phyRules.get(item * 1) + `较差，${this.phyAdvise.get(item * 1)}`
                                }
                            })
                            rankingHtml += '。'
                        } else {
                            ranking1.forEach(item => {
                                if (item != 1) {
                                    rankingHtml += '；' + this.phyRules.get(item * 1) + `较差，${this.phyAdvise.get(item * 1)}`
                                }
                            })
                            rankingHtml += '。'
                        }

                        this.rankingHtml = rankingHtml;
                    }
                }).catch(() => { })
            },

            // 获取进步，退步榜
            getReportProgress() {
                this.hasProgressData = true;
                this.hasBackslideData = true;
                this.$axios.post('/jlp/physical/report/comparerate', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        let progress = response.data.data.progress;
                        let backslide = response.data.data.backslide
                        // 进步，退步
                        // let progress = [
                        //     { testNameType: '2', currentPassRate: '8540', lastPassRate: '7910' },
                        //     { testNameType: '3', currentPassRate: '8120', lastPassRate: '7500' },
                        //     { testNameType: '1', currentPassRate: '7810', lastPassRate: '7600' },
                        // ],
                        //     backslide = [
                        //         { testNameType: '5', currentPassRate: '8000', lastPassRate: '8800' },
                        //         { testNameType: '6', currentPassRate: '7750', lastPassRate: '8400' },
                        //         { testNameType: '4', currentPassRate: '7200', lastPassRate: '7560' },
                        //     ];

                        let pie_progress = this.$refs.pie_progress; // 进步
                        pie_progress.removeSeries();
                        let curProgress = [], lastProgress = [], xcateName = [];
                        // 文案
                        let progressHtml = '';
                        if (progress.length > 0) {
                            this.progressTitle = progress.length < 3 ? '进步榜' : '进步榜前三';
                            progress.forEach(item => {
                                curProgress.push(item.currentPassRate / 100);
                                lastProgress.push(item.lastPassRate / 100);
                                xcateName.push(this.textNameFormat.get(item.testNameType * 1))
                            })
                            pie_progress.getChart().xAxis[0].update({
                                categories: xcateName
                            });
                            pie_progress.addSeries(
                                { name: '本次及格率', data: curProgress, maxPointWidth: 20 }
                            );
                            pie_progress.addSeries(
                                { name: '上一次及格率', data: lastProgress, maxPointWidth: 20 }
                            );
                            progressHtml = '';
                            if (progress.length > 1 && progress[0].currentPassRate - progress[0].lastPassRate == progress[1].currentPassRate - progress[1].lastPassRate) {
                                // 两个进步相同
                                progressHtml += `${this.textNameFormat.get(progress[1].testNameType * 1)}和`
                            }
                            let proRate = ((progress[0].currentPassRate - progress[0].lastPassRate) / 100).toFixed(1);
                            progressHtml += `${this.textNameFormat.get(progress[0].testNameType * 1)}进步最为明显，及格率上升了${proRate}个百分点，`
                        } else {
                            this.hasProgressData = false
                        }


                        let pie_backslide = this.$refs.pie_backslide; // 退步
                        pie_backslide.removeSeries();
                        let curBack = [], lastBack = [], xcateBack = [];
                        let backslideHtml = '';
                        if (backslide.length > 0) {
                            this.backslideTitle = backslide.length < 3 ? '退步榜' : '退步榜前三';
                            backslide.forEach(item => {
                                curBack.push(item.currentPassRate / 100);
                                lastBack.push(item.lastPassRate / 100);
                                xcateBack.push(this.textNameFormat.get(item.testNameType * 1))
                            })
                            pie_backslide.getChart().xAxis[0].update({
                                categories: xcateBack
                            });
                            pie_backslide.addSeries(
                                { name: '本次及格率', data: curBack, maxPointWidth: 20 }
                            );
                            pie_backslide.addSeries(
                                { name: '上一次及格率', data: lastBack, maxPointWidth: 20 }
                            );

                            let backRate = ((backslide[0].lastPassRate - backslide[0].currentPassRate) / 100).toFixed(1);
                            backslideHtml += `${this.textNameFormat.get(backslide[0].testNameType * 1)}退步最为明显，及格率下降了${backRate}个百分点，`
                        } else {
                            this.hasBackslideData = false;
                        }

                        let pbhtml = '说明学生'
                        if (progressHtml) {

                            if (progress[0].currentPassRate - progress[0].lastPassRate == progress[1].currentPassRate - progress[1].lastPassRate) {
                                // 两个进步相同
                                pbhtml += `${this.phyRules.get(progress[1].testNameType * 1)}和`
                            }
                            pbhtml += `${this.phyRules.get(progress[0].testNameType * 1)}变好`
                        }
                        if (progressHtml && backslideHtml) {
                            pbhtml += `，但是`
                        }
                        if (backslideHtml) {
                            pbhtml += `${this.phyRules.get(backslide[0].testNameType * 1)}下降`
                        }
                        pbhtml += '。'

                        this.probackHtml = '本次体测' + progressHtml + backslideHtml + pbhtml;
                        if (progressHtml.length == 0 && backslideHtml.length == 0) {
                            this.probackHtml = '';
                        }
                    }
                }).catch(() => { })
            },

            getReportSchools() {
                this.$axios.post('/jlp/physical/report/school', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        // 学校
                        let schoolPhysical = response.data.data
                        // let schoolPhysical = [
                        //     { exclent: '3', good: '82', pass: '23', nopass: '7', schoolName: '学校名1' },
                        //     { exclent: '6', good: '32', pass: '33', nopass: '8', schoolName: '学校名2' },
                        //     { exclent: '13', good: '42', pass: '43', nopass: '9', schoolName: '学校名3' },
                        //     { exclent: '23', good: '39', pass: '53', nopass: '10', schoolName: '学校名4' },
                        //     { exclent: '19', good: '62', pass: '23', nopass: '11', schoolName: '学校名5' },
                        // ];
                        this.selectScoreHtml(schoolPhysical, 'exclentRate');
                        let schoolPhyHtml = '本次测试优秀率最高的学校是' + this.selectScoreHtml(schoolPhysical, 'exclentRate') + '，';
                        schoolPhyHtml += '及格率最高的是' + this.selectScoreHtml(schoolPhysical, 'passRate') + '，';
                        schoolPhyHtml += '不及格率最高的是' + this.selectScoreHtml(schoolPhysical, 'nopassRate') + '。';
                        this.everySGHtml = schoolPhyHtml;
                        let pie_school = this.$refs.pie_school; // 成绩
                        pie_school.removeSeries();
                        let drawObj = this.newDrawList(schoolPhysical);

                        pie_school.getChart().xAxis[0].update({
                            allowDecimals: false,
                            categories: drawObj.xcateName
                        });
                        pie_school.addSeries(
                            { color: this.exclentColor, name: '优秀率', data: drawObj.exclentArr, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                        );
                        pie_school.addSeries(
                            { color: this.passColor, name: '及格率', data: drawObj.passArr, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                        );
                    }
                }).catch(() => { })
            },

            getReportGrades() {
                this.$axios.post('/jlp/physical/report/grade', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        // 年级
                        let schoolPhysical = response.data.data
                        // let schoolPhysical = [
                        //     { exclent: '3', good: '82', pass: '23', nopass: 17, grade: '1' },
                        //     { exclent: '6', good: '32', pass: '33', nopass: 8, grade: '2' },
                        //     { exclent: '13', good: '42', pass: '43', nopass: 10, grade: '3' },
                        //     { exclent: '23', good: '39', pass: '53', nopass: 10, grade: '4' },
                        // ];
                        this.selectScoreHtml(schoolPhysical, 'exclentRate');
                        let schoolPhyHtml = '本次测试优秀率最高的年级是' + this.selectScoreHtml(schoolPhysical, 'exclentRate') + '，';
                        schoolPhyHtml += '及格率最高的是' + this.selectScoreHtml(schoolPhysical, 'passRate') + '，';
                        schoolPhyHtml += '不及格率最高的是' + this.selectScoreHtml(schoolPhysical, 'nopassRate') + '。';
                        this.everySGHtml = schoolPhyHtml;

                        let pie_school = this.$refs.pie_school; // 成绩
                        pie_school.removeSeries();
                        let drawObj = this.newDrawList(schoolPhysical);

                        pie_school.getChart().xAxis[0].update({
                            allowDecimals: false,
                            categories: drawObj.xcateName
                        });
                        pie_school.addSeries(
                            { color: this.exclentColor, name: '优秀率', data: drawObj.exclentArr, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                        );
                        pie_school.addSeries(
                            { color: this.passColor, name: '及格率', data: drawObj.passArr, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                        );
                    }
                }).catch(() => { })
            },
            // 查找优秀率及格率最高的
            selectScoreHtml(schoolPhysical, myRate) {
                // 优秀率及格率的过滤
                let mySchoolsPhy = schoolPhysical.map(item => {
                    let total = item.exclent * 1 + item.good * 1 + item.pass * 1 + item.nopass * 1;
                    let proName = '';
                    for (let i in item) {
                        // name重新整理
                        if (i.indexOf('Name') > -1) {
                            proName = item[i]
                        }
                        // 年级整理
                        if (i.indexOf('grade') > -1) {
                            proName = this.$util.gradeFormat(item[i] * 1)
                        }
                    };
                    return {
                        name: proName,
                        exclentRate: (item.exclent / total * 100).toFixed(1) * 1,
                        passRate: ((total - item.nopass) / total * 100).toFixed(1) * 1,
                        nopassRate: (item.nopass / total * 100).toFixed(1) * 1,
                    }
                })
                let myPhysArr = mySchoolsPhy.sort(this.$util.sortby(myRate)).reverse()
                let myexclent = myPhysArr.filter((item, index) => {
                    return item[myRate] == myPhysArr[0][myRate]
                })
                // 优秀率最高的
                let bestExclentHtml = '';
                myexclent.reverse().forEach((ele, index) => {
                    if (index == 0) {
                        bestExclentHtml += `${ele.name}（${(ele[myRate]).toFixed(1)}%）`
                    } else if (index > 0 && index < myexclent.length - 1) {
                        bestExclentHtml += `、${ele.name}（${(ele[myRate]).toFixed(1)}%）`
                    } else {
                        bestExclentHtml += `和${ele.name}（${(ele[myRate]).toFixed(1)}%）`
                    }
                })
                return bestExclentHtml
            },

            newDrawList(handleArr) {
                let exclentArr = [],
                    goodArr = [],
                    passArr = [],
                    nopassArr = [],
                    xcateName = [];
                handleArr.forEach(item => {
                    let proName = '',
                        exclent = item.exclent * 1,
                        good = item.good * 1 + exclent,
                        pass = item.pass * 1 + good,
                        nopass = item.nopass * 1;
                    exclentArr.push({ y: (pass + nopass) > 0 ? ((exclent / (pass + nopass)) * 100).toFixed(1) * 1 : 0, per: exclent });
                    goodArr.push({ y: (pass + nopass) > 0 ? ((good / (pass + nopass)) * 100).toFixed(1) * 1 : 0, per: good });
                    passArr.push({ y: (pass + nopass) > 0 ? ((pass / (pass + nopass)) * 100).toFixed(1) * 1 : 0, per: pass });
                    nopassArr.push({ y: (pass + nopass) > 0 ? ((nopass / (pass + nopass)) * 100).toFixed(1) * 1 : 0, per: nopass });

                    for (let i in item) {
                        // name重新整理
                        if (i.indexOf('Name') > -1) {
                            proName = item[i] + '（' + (pass + nopass) + '人）'
                        }
                        // 年级整理
                        if (i.indexOf('grade') > -1) {
                            proName = this.$util.gradeFormat(item[i] * 1) + '（' + (pass + nopass) + '人）'
                        }
                    };
                    xcateName.push(proName);
                })
                return {
                    exclentArr,
                    goodArr,
                    passArr,
                    nopassArr,
                    xcateName
                }
            },

            getReportClassRank() {
                this.$axios.post('/jlp/physical/report/rank/class', {
                    physicalId: this.physicalId
                }).then(response => {
                    if (response.data.error == 10000 && response.data.data) {
                        // 班级
                        let ranking = [];
                        if (response.data.data.length > 6) {
                            ranking = response.data.data.slice(0, 6);
                        } else {
                            ranking = response.data.data
                        }
                        this.classRank = ranking;
                        let prograssClass = [], backClass = [];
                        if (ranking.length > 3) {
                            prograssClass = ranking.slice(0, 3)
                            backClass = ranking.slice(3);
                        } else {
                            prograssClass = ranking
                        }
                        this.prograssClasslen = prograssClass.length;
                        this.backClasslen = backClass.length;
                        // 文案
                        let classRankHtml = `各班级及格率排名前三的分别是`
                        prograssClass.forEach((ele, index) => {
                            if (index == 0) {
                                classRankHtml += `${ele.className}`
                            } else if (index > 0 && index < prograssClass.length - 1) {
                                classRankHtml += `、${ele.className}`
                            } else {
                                classRankHtml += `和${ele.className}`
                            }
                        })
                        classRankHtml += `；排名后三的分别是`
                        backClass.forEach((ele, index) => {
                            if (index == 0) {
                                classRankHtml += `${ele.className}`
                            } else if (index > 0 && index < backClass.length - 1) {
                                classRankHtml += `、${ele.className}`
                            } else {
                                classRankHtml += `和${ele.className}`
                            }
                        })
                        classRankHtml += '。';
                        this.classRankHtml = classRankHtml;

                    }
                }).catch(() => { })
            },

            // 对比数据整理方法
            formatUpOrDown(rate, type = '个百分点') {
                let rateStr = '';
                if (rate != -99999) {
                    if (rate > 0) {
                        rateStr = '环比上升' + (rate / 100).toFixed(1) + type;
                    } else if (rate == 0) {
                        rateStr = '和上次体测持平'
                    } else {
                        rateStr = '环比下降' + (rate * (-1) / 100).toFixed(1) + type;
                    }
                }
                return rateStr;
            },

            // 导出体测分析报告
            reportPhysicalData() {
                if (!this.physicalId) {
                    return;
                }
                for (let i = 0; i < document.getElementsByClassName('place-box').length; i++) {
                    document.getElementsByClassName('place-box')[i].style.display = 'block'
                }
                var shareContent = document.getElementById("report_box");//需要截图的包裹的（原生的）DOM 对象
                let physicalName = this.physicalName
                setTimeout(() => {
                    html2canvas(shareContent, {
                        scale: 2
                    }).then(function (canvas) {
                        let contentWidth = canvas.width;
                        let contentHeight = canvas.height;
                        let context = canvas.getContext('2d');
                        // 【重要】关闭抗锯齿
                        context.mozImageSmoothingEnabled = false;
                        context.webkitImageSmoothingEnabled = false;
                        context.msImageSmoothingEnabled = false;
                        context.imageSmoothingEnabled = false;

                        //一页pdf显示html页面生成的canvas高度;
                        let pageHeight = contentWidth / 592.28 * 841.89;
                        //未生成pdf的html页面高度
                        let leftHeight = contentHeight;
                        //pdf页面偏移
                        let position = 0;
                        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                        let imgWidth = 595.28;
                        let imgHeight = 592.28 / contentWidth * contentHeight;

                        let pageData = canvas.toDataURL('image/jpeg', 1.0);
                        let pdf = new jsPDF('', 'pt', 'a4');
                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                        } else {
                            while (leftHeight > 0) {
                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }
                        pdf.save(physicalName + '分析报告.pdf');
                        for (let i = 0; i < document.getElementsByClassName('place-box').length; i++) {
                            document.getElementsByClassName('place-box')[i].style.display = 'none'
                        }
                    })
                }, 30)

            },
        }
    }
</script>
<style scoped>
    #physical-report .select-head {
        min-width: 1060px;
        background-color: #fff;
        padding: 20px 24px 10px;
        margin-left: 32px;
        margin-right: 32px;
    }

    #physical-report .search_btn {
        margin-left: 10px;
    }

    #physical-report {
        padding-bottom: 60px;
    }

    .contentBox {
        padding: 0;
    }

    .place-box {
        display: none;
    }

    #report_box {
        width: 1000px;
        margin: 0 auto;
        padding: 0 5% 60px;
        font-size: 18px;
        line-height: 38px;
        background-color: #fff;
    }

    .report-title {
        padding-top: 60px;
    }

    .report-item-length {
        margin-bottom: 10px;
    }

    h2 {
        padding: 10px;
        text-align: center;
    }

    p {
        text-indent: 2em;
    }

    .report_btn {
        margin-right: 20px;
    }

    .total-charts {
        position: relative;
        top: 0;
        left: 0;
        height: 310px;
        width: 100%;
    }

    .total-pie {
        position: absolute;
        top: 0;
        display: inline-block;
        width: 300px;
        height: 300px;
        padding: 0;
    }

    .male-circle {
        position: absolute;
        top: 130px;
        left: 435px;
    }

    .female-circle {
        position: absolute;
        top: 130px;
        left: 715px;
    }

    .total-pie:first-child {
        padding: 0;
        left: 0;
    }

    .total-pie:nth-child(2) {
        left: 300px;
    }

    .total-pie:nth-child(3) {
        left: 600px;
    }

    .total-pie-bot {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 14px;
    }

    .total-pie-bot>span {
        padding-right: 10px;
    }

    .rate-icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 4px;
        background-color: #92d050
    }

    table {
        border-collapse: collapse;
        width: 96%;
        margin: 0 auto;
    }

    table,
    th,
    td {
        border: 1px solid #666;
    }

    .tab-head {
        background-color: #92d050;
        font-weight: bolder;
    }

    td {
        width: 14%;
        text-align: center;
    }

    .progress_back {
        display: inline-block;
        position: relative;
        width: 48%;
        text-align: center;
    }

    .progress_back>span {
        position: relative;
        top: 10px;
        z-index: 100;
    }

    .nodata {
        padding-top: 80px;
        text-align: center;
    }
</style>